#counter {
		width: 600px;
		height: 300px;
		position: relative;
		overflow: hidden;
	}

	#list {
		width: 3600px;
		height: 300px;
		position: absolute;
		z-index: 1;
	}

	#list img {
		width: 600px;
		height: 300px;
		float: left;
	}

	.arrow {
		position: absolute;
		top: 110px;
		text-decoration: none;
		z-index: 2;
		display: none;
		width: 40px;
		height: 40px;
		font-size: 36px;
		font-weight: bold;
		line-height: 39px;
		text-align: center;
		color: #fff;
		background-color: rgba(0, 0, 0, 1);
		cursor: pointer;
	}

	.arrow:hover {
		background-color: rgba(0, 0, 0, 0.8);
	}

	#counter:hover .arrow {
		display: block;
	}

	#pre {
		left: 20px;
	}

	#next {
		right: 20px;
	}

	#list {
		transition: left 1s;
	}

	.list {
		transition: left 0.1s;
	}

	#buttons {
		position: absolute;
		height: 10px;
		width: 120px;
		left: 250px;
		bottom: 20px;
		z-index: 2;
	}

	#buttons span {
		border: 1px solid #FFFFFF;
		border-radius: 5px;
		float: left;
		width: 10px;
		height: 10px;
		background-color: #333;
		margin-right: 5px;
		cursor: pointer;
	}

	#buttons .on {
		background: orangered;
	}